<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%=htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION.properties.title%></title>
    <meta name="description" content="<%=htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION.properties.description%>" />
    <meta property="og:title" content="<%=htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION.properties.title%>" />
    <meta property="og:type" content="<%=htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION.properties.type%>" />
    <meta property="og:url" content="<%=htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION.properties.url%>" />
    <meta property="og:image" content="<%=htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION.properties.image%>" />
    <meta property="og:description" content="<%=htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION.properties.description%>" />

    <% var cssPaths = '/'; %>

    <% if (htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION.contextPath != "/") { %>
        <base href="<%=htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION.contextPath%>" />
        <% var cssPaths = ''; %>
    <% } %>

    <!-- CSS -->
    <link rel="stylesheet" href="geppetto/build/static/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="geppetto/build/static/css/gpt-icons.css"/>

    <% if(htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION.properties.icon.indexOf("http") !== -1){ %>
        <link rel="icon" type="image/png" href="<%=htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION.properties.icon%>"/>
    <% } else{ %>
        <link rel="icon" type="image/png" href="<%= cssPaths%><%=htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION.properties.icon%>"/>
    <% } %>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
        }

        #loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: radial-gradient(1200px 800px at 80% 60%, #dfe9e6 0%, #eef1f4 55%, #eef1f4 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.5s ease-out;
        }

        #loading.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .loading-content {
            text-align: center;
        }

        .spinner {
            width: 60px;
            height: 60px;
            margin: 0 auto 24px;
            border: 4px solid #e6eaee;
            border-top-color: #2b8a6e;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .loading-text {
            font-size: 18px;
            color: #2b8a6e;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .loading-subtext {
            font-size: 14px;
            color: #667085;
        }

        #root {
            width: 100%;
            min-height: 100vh;
        }
    </style>
</head>
<body style="margin: 0px">

<!-- For index purposes -->
<div style="display:none" id="content">
类小脑计算平台 - 神经网络建模与仿真平台
</div>

<!-- 加载界面 -->
<div id="loading">
    <div class="loading-content">
        <div class="spinner"></div>
        <div class="loading-text">正在加载类小脑计算平台...</div>
        <div class="loading-subtext">神经网络建模与仿真平台</div>
    </div>
</div>

<!-- React 应用容器 -->
<div id="root"></div>

<script>
    // 当页面加载完成后，隐藏加载界面
    window.addEventListener('load', function() {
        setTimeout(function() {
            const loading = document.getElementById('loading');
            if (loading) {
                loading.classList.add('hidden');
                // 完全移除加载界面
                setTimeout(function() {
                    loading.style.display = 'none';
                }, 500);
            }
        }, 500);
    });
</script>

<script charset="utf-8" type="text/javascript" src="<%= cssPaths%>geppetto/build/main.bundle.js"></script>
</body>
</html>

